<div class="container mx-auto mb-6 px-4 overflow-hidden">
    <nav class="flex lg:flex-wrap gap-3 overflow-x-auto py-1 lg:gap-6 whitespace-nowrap text-gray-600 md:text-lg mb-4 md:mb-0 lg:justify-center">
        <div class="demo-tab hover:text-gray-800 cursor-pointer px-3 py-1 active-example-tab"
             demo="1"
             onclick="load_demo(1)">
            Sketch Recognition
        </div>
        <div class="demo-tab hover:text-gray-800 cursor-pointer px-3 py-1"
             demo="2"
             onclick="load_demo(2)">
            Question Answering
        </div>
        <div class="demo-tab hover:text-gray-800 cursor-pointer px-3 py-1"
             demo="3"
             onclick="load_demo(3)">
            Image Segmentation
        </div>
        <div class="demo-tab hover:text-gray-800 cursor-pointer px-3 py-1"
             demo="4"
             onclick="load_demo(4)">
            Time Series Forecasting
        </div>
        <div class="demo-tab hover:text-gray-800 cursor-pointer px-3 py-1"
             demo="5"
             onclick="load_demo(5)">
            XGBoost with Explainability
        </div>
    </nav>
</div>
<div class="container mx-auto mb-6 px-4 grid grid-cols-1">
    <div class="demo space-y-2 md:col-span-3" demo="1">
        <div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
            <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">sketch_recognition</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">pass</span><span class="token comment"># Implement your sketch recognition model here...</span>

gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>sketch_recognition<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"sketchpad"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"label"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
        </div>
        <div class="mx-auto max-w-5xl">
        <gradio-app space="gradio/pictionary"> </gradio-app>
        </div>
    </div>
    <div class="demo space-y-2 md:col-span-3 hidden" demo="2">
        <div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
            <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">question_answer</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> question<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">pass </span><span class="token comment"> # Implement your question-answering model here...</span>

gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>question_answer<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"text"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">],</span> outputs<span class="token operator">=</span>[</span><span class="token string">"textbox"</span><span class="token punctuation">,</span> <span class="token string">"text"</span><span class="token punctuation">]).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
        </div>
        <div class="mx-auto max-w-5xl">
        <gradio-app space="gradio/question-answering"> </gradio-app>
        </div>
    </div>
    <div class="demo space-y-2 md:col-span-3 hidden" demo="3">
        <div class="codeblock rounded-lg bg-gray-50 shadow-inner text-sm md:text-base mx-auto max-w-5xl">
            <pre class="language-python"><code class="language-python"><span class="token keyword">import</span> gradio <span class="token keyword">as</span> gr
<span class="token keyword">def</span> <span class="token function">segment</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">:</span>
    <span class="token keyword">pass </span><span class="token comment"> # Implement your image segmentation model here...</span>

gr<span class="token punctuation">.</span>Interface<span class="token punctuation">(</span>fn<span class="token operator">=</span>segment<span class="token punctuation">,</span> inputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">,</span> outputs<span class="token operator">=</span><span class="token string">"image"</span><span class="token punctuation">).</span>launch<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
        </div>
        <div class="mx-auto max-w-5xl">
        <gradio-app space="gradio/Echocardiogram-Segmentation"> </gradio-app>
        </div>
    </div>
    <div class="demo space-y-2 md:col-span-3 hidden" demo="4">
        <div class="mx-auto max-w-5xl">
        <gradio-app space="gradio/timeseries-forecasting-with-prophet"> </gradio-app>
        </div>
    </div>
    <div class="demo space-y-2 md:col-span-3 hidden" demo="5">
        <div class="mx-auto max-w-5xl">
        <gradio-app space="gradio/xgboost-income-prediction-with-explainability"> </gradio-app>
        </div>
    </div>
</div>

<script type="module" src="/assets/index.js"></script>
<script>{% include 'templates/add_copy.js' %}</script>
<script>
    let load_demo = demo_id => {
        document.querySelectorAll(".demo-tab").forEach(e => {
            e.classList.remove('active-example-tab');
        })
        document.querySelectorAll(".demo").forEach(e => {
            e.classList.add("hidden");
        })
        document.querySelector(`.demo-tab[demo='${demo_id}']`).classList.add("active-example-tab");

         document.querySelector(`.demo[demo='${demo_id}']`).classList.remove("hidden");
    }
</script>
